<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">登录</view>
			</block>
		</cu-custom>
		<view class="padding-top-48 padding-left-32 padding-right-32">
			<view class="flex align-center justify-between">
				<view>
					<view class="selLogin-top-text">GREEN</view>
					<view class="selLogin-top-text">PASSPORT</view>
				</view>
				<view>
					<image src="https://txr001.zthj.net/static/img/login.png" class="login-logo"></image>
				</view>
			</view>
			<view class="padding-top-16 padding-bottom-98">
				<text class="text-0101 text-bold-600 text-64">青牒碳账户</text>
				<text class="padding-left-16 padding-right-24 text-64"> | </text>
				<text class="text-0101 text-bold-600 text-64">登录</text>
			</view>
			<view class="flex text-center">
				<view class="flex-sub" @tap="TabCur=1">
					<text :class="TabCur==1?'sel':'unsel'">验证码登录</text>
				</view>
				<view class="flex-sub" @tap="TabCur=2">
					<text :class="TabCur==2?'sel':'unsel'">密码登录</text>
				</view>
			</view>
			<view class="cu-form-group margin-top-48">
				<image src="https://txr001.zthj.net/static/img/phone.png" class="img-40"></image>
				<input class="input-class" placeholder="请输入手机号" v-model="form.mobile"></input>
			</view>
			<view v-if="TabCur==1" class="cu-form-group margin-top-48">
				<image src="https://txr001.zthj.net/static/img/yzm.png" class="img-40"></image>
				<input class="input-class" placeholder="请输入验证码" v-model="form.captcha"></input>
				<button class="yzm-text cu-btn" @click="getCode" :disabled="disabled">{{title}}</button>
			</view>
			<view v-if="TabCur==2" class="cu-form-group margin-top-48">
				<image src="https://txr001.zthj.net/static/img/mm.png" class="img-40"></image>
				<input class="input-class" :password="showPassword" placeholder="请输入密码" v-model="form.password"></input>
				<image :src="pwdIcon" @click="showPwd" class="img-40"></image>
			</view>
			<button class="cu-btn wx-btn" @click="submitLogin">登录</button>
		</view>
	</view>
</template>

<script>
	import {
		loginfunc
	} from '@/common/fa.mixin.js'
	export default {
		mixins: [loginfunc],
		data() {
			return {
				TabCur: 1,
				password: "",
				disabled: false,
				title: '获取验证码',
				showPassword: true,
				pwdIcon: 'https://txr001.zthj.net/static/img/eye-close.png',
				form: {
					mobile: '',
					captcha: '',
					password: ''
				},
			}
		},
		methods: {
			showPwd: function() {
				this.showPassword = !this.showPassword;

				if (this.showPassword == true) {
					this.pwdIcon = 'https://txr001.zthj.net/static/img/eye-close.png'
				} else {
					this.pwdIcon = 'https://txr001.zthj.net/static/img/eye-close.png'
				}
			},
			getCode: async function() {
				if (this.title != '获取验证码') {
					this.$u.toast('倒计时结束后再发送');
					return false;
				}
				let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (!this.form.mobile) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!reg.test(this.form.mobile)) { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				this.title = 60
				var times = setInterval(() => {
					this.title--; //递减
					if (this.title <= 0) {
						// <=0 变成获取按钮
						this.title = '获取验证码'
						clearInterval(times);
					}
				}, 1000); //1000毫秒后执行
				let res = await this.$api.getSmsSend({
					mobile: this.form.mobile,
					event: 'mobilelogin'
				});
				this.$u.toast(res.msg);
			},
			submitLogin: async function() {
				let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (!this.form.mobile) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!reg.test(this.form.mobile)) { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if (this.form.captcha == '' && this.TabCur == 1) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (this.form.password == '' && this.TabCur == 2) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				let res;
				if (this.TabCur == 1) {

					res = await this.$api.mobilelogin({
						mobile: this.form.mobile,
						captcha: this.form.captcha
					});
				} else {
					 res = await this.$api.goLogin({
						account: this.form.mobile,
						password: this.form.password
					});
				}
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.$u.vuex('vuex_token', res.data.token);
				uni.setStorageSync('jwt_token',res.data.token);
				uni.switchTab({
					url: "/pages/mine/index"
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped>
	.selLogin-top-text {
		font-size: 40rpx;
		font-weight: 400;
		color: #010101;
	}

	.login-logo {
		width: 48rpx;
		height: 68rpx;
	}

	.sel {
		font-size: 32rpx;
		font-weight: 500;
		color: #010101;
		padding-bottom: 14rpx;
		border-bottom: 4rpx solid #010101;
	}

	.unsel {
		font-size: 32rpx;
		font-weight: 400;
		color: #010101;
	}

	.wx-btn {
		height: 88rpx;
		line-height: 88rpx;
		background: #24458E;
		border-radius: 32rpx;
		width: 100%;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 80rpx;
	}

	.cu-form-group {
		min-height: 88rpx;
		border-radius: 8rpx;
		border: 2rpx solid #D5D8D9;
	}

	.input-class {
		padding-left: 20rpx;
	}

	.yzm-text {
		font-size: 28rpx;
		font-weight: 400;
		color: #24458E;
		padding-left: 32rpx;
		border-left: 2rpx solid #D5D8D9;
		background-color: #FFFFFF;
		height: 32rpx;
	}
</style>